<template>
	<section v-loading="listLoading">
		<!--<el-row class="header" :gutter="30">
			<el-col :span="12">
				<dir class="grid" style="background: rgb(183,103,246);">
					<div class="title">今日新增用户</div>
					<div class="num">{{data.todayNewUser}}</div>
				</dir>
			</el-col>
			<el-col :span="12">
				<dir class="grid" style="background: rgb(103,194,58);">
					<div class="title">总用户</div>
					<div class="num" v-if="data.pageInfo">{{data.pageInfo.totalNum}}</div>
				</dir>
			</el-col>
		</el-row>-->
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="filters">
				<el-form-item>
					<el-input clearable v-model="filters.nickname" placeholder="用户昵称"></el-input>
				</el-form-item>
				<el-form-item>
					<el-input clearable v-model="filters.phone" placeholder="手机号码"></el-input>
				</el-form-item>
				<el-form-item label="状态">
		            <el-select v-model="filters.status" clearable> 
		                <el-option v-for="item in option" :key="item.value" :label="item.label" :value="item.value"></el-option>
		            </el-select>
			    </el-form-item>
				<el-form-item>
					<el-button type="primary"  size="medium" v-on:click="handleCurrentChange(1)">查询</el-button>
				</el-form-item>  
			</el-form>
		</el-col>
		<!--列表-->
		<el-table :data="users" stripe highlight-current-row @selection-change="selsChange" border style="width: 100%;">
			<el-table-column prop="id" label="id" min-width="40" align="center">
			</el-table-column>
			<el-table-column prop="avatar" label="头像" align="center" width="70">
                <template slot-scope="scope">
                	<el-popover placement="top-start" title="" trigger="click" v-if="scope.row.avatar">
                		<img :src="scope.row.avatar" alt="" style="width: 500px;height: 500px;border-radius:50%; vertical-align:middle;object-fit: cover;"/>
                		<img slot="reference" :src="scope.row.avatar" style="width: 50px;height: 50px;border-radius: 50%;vertical-align: middle;object-fit: cover;"/>
                	</el-popover>
                	
                </template>
            </el-table-column>
            <el-table-column prop="nickname" label="昵称" min-width="60" align="center">
		    </el-table-column>
			<el-table-column prop="mobile" label="手机号码" min-width="80" align="center">
			</el-table-column>
			<el-table-column prop="toDayCommissionSumCount" label="今日佣金" min-width="80" align="center">
			</el-table-column>
			<el-table-column prop="commission" label="当前可提现佣金" min-width="80" align="center">
			</el-table-column>
			<el-table-column prop="commissionSumCount" label="佣金总数" min-width="80" align="center">
			</el-table-column>
			<el-table-column prop="dividend" label="分红" min-width="80" align="center">
			</el-table-column>
			<el-table-column prop="managementAward" label="管理奖" min-width="80" align="center">
			</el-table-column>
		    <el-table-column label="状态" min-width="80" align="center">
		    	<template slot-scope="scope">
		    		<span>{{scope.row.status===0?'正常' :'禁用'}}</span>
		    	</template>
			</el-table-column>
			<el-table-column prop="addTime" label="注册时间" min-width="100" align="center">
			</el-table-column>
			<el-table-column label="操作" width="80" align="center">
				<template slot-scope="scope">
		            <el-popover placement="top-start" trigger="hover">
		            	<el-button v-if="scope.row.status==1" size="mini" type="success" @click="handleToEnable(scope.row.id)" >启用</el-button>
		                <el-button v-if="scope.row.status==0" size="mini" type="danger" @click="handleDisabled(scope.row.id)" >禁用</el-button>
		                <el-button size="mini" type="success" plain @click="userComment(scope.$index, scope.row, 'userComment')">评论</el-button>
		                <el-button size="mini" type="success" plain @click="userCoupon(scope.$index, scope.row, 'userCoupon')">优惠券</el-button>
		                <el-button size="mini" type="success" plain @click="useryongjin(scope.$index, scope.row, 'useryongjin')">佣金</el-button>
		                <el-button size="mini" type="success" plain @click="userjifen(scope.$index, scope.row, 'userjifen')">积分</el-button>
		                <el-button size="mini" type="success" plain @click="usertuandui(scope.$index, scope.row, 'usertuandui')">团队</el-button>
					    <el-button slot="reference" size="mini" type="success" plain>更多</el-button>
					</el-popover>
				</template>
			</el-table-column>
		</el-table>
		<!--工具条-->
		<el-col :span="24" class="toolbar">
			<el-pagination background layout="prev, pager, next, jumper" @current-change="handleCurrentChange" :page-size="pageSize" :total="total" style="float:right;">
			</el-pagination>
		</el-col>
		
		
	</section>
</template>

<script>
	export default {
		data() {
			return {
				filters: {
					nickname: '',
					status:'',
					phone:'',
				},
				option:[{
					value:0,
					label:'正常'
				},{
					value:1,
					label:'禁用'
				}],
				data:{},
				users: [],
				sels: [],
				total: 0,
				page: 1,
				pageSize: 10,
				listLoading: false,
			}
		},
		methods: {
			
			//评论
			userComment(index, row, href) {
				console.log(href, '1')
				this.$router.push({
					path: '/' + href,
					query: {
						id: row.id
					}
				})
			},
			//优惠券
			userCoupon(index, row, href) {
				console.log(href, '1')
				this.$router.push({
					path: '/' + href,
					query: {
						id: row.id
					}
				})
			},
			//佣金
			useryongjin(index, row, href) {
				console.log(href, '1')
				this.$router.push({
					path: '/' + href,
					query: {
						id: row.id
					}
				})
			},
			//积分
			userjifen(index, row, href) {
				console.log(href, '1')
				this.$router.push({
					path: '/' + href,
					query: {
						id: row.id
					}
				})
			},
			//团队
			usertuandui(index, row, href) {
				console.log(href, '1')
				this.$router.push({
					path: '/' + href,
					query: {
						id: row.id
					}
				})
			},
			//时间转换开始时间 
			formatDate(row, column) {
                let date = new Date(parseInt(row.addTime));
                let Y = date.getFullYear() + '-';
                let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) + '-' : date.getMonth() + 1 + '-';
                let D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' ';
                let h = date.getHours() < 10 ? '0' + date.getHours() + ':' : date.getHours() + ':';
                let m = date.getMinutes()  < 10 ? '0' + date.getMinutes() + ':' : date.getMinutes() + ':';
                let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
                return Y + M + D + h + m + s;
           },
            zeroize(num) {
                return (String(num).length == 1 ? "0" : "") + num;
            },
            timestampFormat(timestamp) {
                var curTimestamp = parseInt(new Date().getTime() / 1000); //当前时间戳
                var timestampDiff = curTimestamp - parseInt(timestamp / 1000); // 参数时间戳与当前时间戳相差秒数
                var curDate = new Date(curTimestamp * 1000); // 当前时间日期对象
                var tmDate = new Date(parseInt(timestamp / 1000) * 1000); // 参数时间戳转换成的日期对象
                var Y = tmDate.getFullYear(),
                m = tmDate.getMonth() + 1,
                d = tmDate.getDate();
                var H = tmDate.getHours(),
                i = tmDate.getMinutes(),
                s = tmDate.getSeconds();
                return (Y + "-" + this.zeroize(m) + "-" + this.zeroize(d) + " " + this.zeroize(H) + ":" + this.zeroize(i) + ":" + this.zeroize(s));
            },
			handleCurrentChange(val) {
				this.page = val;
				this.getUsers();
			},
			//获取用户列表
			getUsers:function (){
				this.listLoading = true;
				let para = {
				    page: this.page,
				    size: this.pageSize,
					phone: this.filters.phone,
					nickname: this.filters.nickname,
					status: this.filters.status,
				};
				var instance = this.$http.create({headers: {'content-type': 'application/x-www-form-urlencoded','admin_five_palace_token':JSON.parse(sessionStorage.getItem('token'))},
				});  
				instance.post('admin/wxUser/getUserList', this.qs.stringify(para)).then(data => {
					let  res = data.data;
					console.log(data);
					if (res.code !== 0) {
						this.$message({
							message: res.msg,
							type: 'error'
						});
					} else {
						console.log(res)
						this.total = res.total;
						this.users = res.rows;
						this.data = res.data;
						this.listLoading = false;
					}
				}); 
			},
			dialogClose(){},
			selsChange: function (sels) {
				this.sels = sels;
			},
			//封号
			handleDisabled(id){
				this.$confirm('确定封号吗?', '提示', {}).then(() => {
					this.listLoading = true;
					var instance = this.$http.create({headers: {'content-type': 'application/x-www-form-urlencoded','admin_five_palace_token':JSON.parse(sessionStorage.getItem('token'))},
				    });  
				    instance.post('admin/wxUser/updateUserStatus', this.qs.stringify({userId:id,status:1})).then(data => {
						
						let  res = data.data;
						if (res.code !== 0) {
							this.$message({
								message: res.msg,
								type: 'error'
							});
						} else {
							this.$message({
								message: '成功',
								type: 'success'
							});
							this.getUsers();
						}
					})
				}).catch(() => {

				});
			},
			//启用
			handleToEnable(id){
				this.$confirm('确定解除封号吗?', '提示', {}).then(() => {
					this.listLoading = true;
					var instance = this.$http.create({headers: {'content-type': 'application/x-www-form-urlencoded','admin_five_palace_token':JSON.parse(sessionStorage.getItem('token'))},
				    });  
				    instance.post('admin/wxUser/updateUserStatus', this.qs.stringify({userId:id,status:0})).then(data => {
						
						let  res = data.data;
						if (res.code !== 0) {
							this.$message({
								message: res.msg,
								type: 'error'
							});
						} else {
							this.$message({
								message: '成功',
								type: 'success'
							});
							this.getUsers();
						}
					})
				}).catch(() => {

				});
			},
			
		},
		mounted() {
			this.getUsers();
		}
	}

</script>
<style>
	.el-table td, .el-table th{
		padding: 6px 0px;
	}
	.el-table{
		font-size: 12px;
	}
	.el-button+.el-button{
		margin-left: 0px;
	}
	.el-table th.gutter{
        display: table-cell!important;
    }
    .uploadImg{
	  	display: flex;
	  	flex-direction: row;
	  	flex-wrap: wrap;
	}
	.uploadImgItem{
	  	display: flex;
	  	flex-direction: row;
	  	flex-wrap: wrap;
	  	margin-right: 10px;
	  	margin-bottom: 10px;
	  	width: 145px;
	  	height: 145px;
	  	position: relative;
	}
	.uploadImgItemDel{
	  	position: absolute;
	  	top: -5px;
	  	right: -5px;
	  	width: 30px;
	  	height: 30px;
	}
	.mengmaxiangCode{
	  	display: flex;
	  	flex-direction: row;
	}
	.mengmaxiangCodeDiv{
	  	margin-left: 20px;
	}
	.mengmaxiangCodeDiv div{
	  	width: 80px;
		height: 34px;
		background: #333333;
		border-radius: 10px 10px 10px 10px;
		color: white;
		margin-top: 2px;
		display: flex;
		flex-direction: row;
		align-content: center;
		justify-content: center;
		line-height: 34px;
	}
	.mengmaxiangCodeDiv button{
	  	width: 80px;
		height: 34px;
		background: #333333;
		border-radius: 10px 10px 10px 10px;
		border: none;
		outline: none;
		color: white;
		margin-top: 2px;
	}
</style>
<style scoped lang="scss">
	.header{
        text-align: center;
        margin: 10px 0;
        .grid{
            border: 1px solid #f0f0f0;
            padding: 10px 0;
            border-radius: 10px;
        }
        .title{
            font-size: 16px;
            line-height: 30px;
            margin-bottom: 6px;
            color: white;
        }
        .num{
            font-size: 16px;
            font-weight: bold;
            color: white;
        }
    }
    
</style>
